<template>
  <div class="search-lenovo">
    <van-cell icon="search" v-for="(item, index) in suggestions" :key="index" @click="setsearchtext(item)">
      <template #title>
        <span v-html="hiligt(item )"></span>
       
      </template>
    </van-cell>
  </div>
</template>

<script>
import {getsuggestions} from "@/api/user";
import {debounce} from 'lodash'
export default {
  data(){
      return{
        suggestions:[]//联想列表
      }
  },
  props: {
    searchtext:{
      type:String,
      required: true,
    }
  },
  watch:{
    searchtext:{
      //  debounce()函数 目的：防抖，好处：减少接口的请求
      //      参数一：函数
      //      参数二：防抖时间
      //      返回：一个函数
        handler:debounce(function(value){
          // console.log(value);
         
           if(value){
                 this.getsuggestion(value)
              }
        },500),
             
        immediate:true//上来就执行一次
    }
  },
  methods:{
    //获得搜索联想
  async  getsuggestion(q) {
      // this.ishistory=!this.ishistory
      try{
      const {data:res}= await getsuggestions(q)
          this.suggestions=res.data.options
            // console.log(res.data);
      }catch(err){
        this.$toast('搜索出错，稍后再试')
      }
    },
    // 高亮搜索字体
    hiligt(item ){
      if(item){
         let reg=new RegExp(this.searchtext,'gi')
      //  console.log(reg);
      return item.replace(reg,` <span style="color:red">${this.searchtext}</span>`)
      }else{
        return item
      }
      
    },
    // 点击联想词
    setsearchtext(item){
         this.$emit('search',item)
         
    }
  }
};
</script>

<style>
</style>